<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" xmlns:wicket="http://wicket.apache.org/">
<wicket:panel>
  <div wicket:id="examples" class="section">
  	<h2>Progress bar example</h2>
	<p>
		This example show how to build a progress bar with <strong>WiQuery</strong>.
	</p>
	<div class="section">
		<div class="runit">
			<a wicket:id="increaseProgress">Click me to increase progress bar</a>
			<div wicket:id="progress">
			</div>
		</div>
		
		<div class="source">
			<p class="htmlCode">
<code class="html">
&lt;a wicket:id="increaseProgress"&gt;Click me to increase progress bar&lt;/a&gt;
&lt;div wicket:id="progress"&gt;
&lt;/div&gt;

</code>
			</p>
			<p class="javaCode">
<code class="java">
// consider being in a WebPage constructor 
public MyWebPage(String id) {
        super(id);
        
        Button button = new Button("increaseProgress");
        this.add(button);
        
        final ProgressBar pgbar = new ProgressBar("progress");
        pgbar.setValue(0);
        button.add(new WiQueryEventBehavior(new Event(MouseEvent.CLICK) {
        
            private static final long serialVersionUID = 1L;
            
            @Override
            public JsScope callback() {
                pgbar.setValue(13);
                return JsScope.quickScope(pgbar.update().render());
            }
        
        }));
        this.add(pgbar);
    }
</code>
			</p>

		</div>
	</div>

  </div>

</wicket:panel>
</html>
  